<template>
<div>
     <div class="searchParking">
            <el-select
                v-model="mySearchData.options"
                placeholder="选择搜索类型"
                class="searchSelectWidth"
            >
                <el-option value="address"> 地址 </el-option>
                <el-option value="price"> 价格 </el-option>
                <el-option value="cycle"> 出租时间 </el-option>
            </el-select>
            <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="mySearchData.search_data"
                class="inputWidth"
            >
            </el-input>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="myChangeSearchData(mySearchData)"
                >搜索</el-button
            >
        </div>
    <el-table
            :data="myordersData"
            border
            style="width: 100%"
        >
            <el-table-column prop="address" label="车位地址" width="180">
            </el-table-column>
            <el-table-column prop="number" label="车位号" width="180">
            </el-table-column>
            <el-table-column prop="cycle" label="出租时间"> </el-table-column>
            <el-table-column prop="price" label="出租价格(每月)">
            </el-table-column>
            <el-table-column prop="tenantsId.name" label="租客姓名">
            </el-table-column>
            <el-table-column prop="tenantsId.phone" label="租客电话">
            </el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.rent">已支付订单</span>
                    <span v-else>未支付订单</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="toRentorders(scope.row.tenantsId._id)"
                        >查看租客信息</el-button
                    >
                </template>
            </el-table-column>
    </el-table>
     <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parkingsData.currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parkingsData.totalNum"
        >
        </el-pagination>
    </div>
</template>


<script>
import { createNamespacedHelpers } from "vuex";
const {mapState,mapMutations,mapGetters,mapActions} = createNamespacedHelpers("parkings");
export default {
     data() {
        return {
            mySearchData: {
                options: "address",
                search_data: "",
            },
            changeInput: false,
            currentChangeInput: "",
        };
    },
    computed:{
        ...mapState(['parkingsData', "pageSize", "searchData"]),
        //将租客订单中状态值为5的数据用filter筛选出来渲染到页面上 冰
        myordersData(){
            return this.parkingsData.data = this.parkingsData.data.filter(elem=>elem.state==5);
        }
    },
    watch: {
        // "parkingsData.currentPage"() {
        //     this.getParkings();
        // },
        // parkingsData: {
        //     handler(val) {
        //         // this.getParkings();
        //     },
        //     deep: true,
        // },parkingsData.currentPage
        "parkingsData.currentPage"() {
            this.getParkings();
        },
        pageSize() {
            this.getParkings();
        },
        searchData() {
            this.getParkings();
        },
    },
    mounted() {
        this.getParkings();
    },
    methods:{
        ...mapActions(['getParkings']),
        //获取订单状态值为5的 就是已经出租出去了的订单 冰 就是上面的getmyorders

        ...mapMutations([
            "changCurrentPage",
            "changePageSize",
            "changeSearchData",
            "",
        ]),

        //设置每页多少条
        handleSizeChange(val) {
            this.changePageSize(val);
        },

        //翻页方法
        handleCurrentChange(val) {
            this.changCurrentPage(val);
        },

        //搜索按钮
        myChangeSearchData(val) {
            this.changeSearchData(val);
            this.mySearchData.search_data = "";
        },



        //跳转到租客信息页面 将要查看的租客的Id用动态路由传过去  冰
        toRentorders(_id){
            this.$router.push('/System/renttenants/'+_id)
        }
    },
}
</script>
<style lang="scss">
.inputWidth {
    width: 20%;
    margin: 0 5px;
}
.searchParking {
    margin-bottom: 30px;
}
.searchSelectWidth {
    width: 8%;
}
</style>